class List {
  constructor() {
    // window.onscroll = this.lr.bind(this);
    // this.getGoods();
    this.ajax();
  }
  ajax() {
    // 1 调用ajax发送数据
    let xhr = new XMLHttpRequest();
    xhr.open('post', './data/goods.php');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send();
    // 2 接收结果进行提示
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let str = xhr.responseText;
        str = JSON.parse(str);
        this.getGoods(str.data);
        // console.log(str);
      }
    }
  }
  /**********渲染页面的数据*******/
  // 需求:页面加载进来,就要渲染数据
  getGoods(data) {
    // console.log(data);
    let str = '';
    data.forEach(ele => {
      // console.log(ele);
      //1 获取对象中的name,img,price等数据
      let {
        id,
        img,
        price,
        name
      } = ele;
      // 2 拼接到html中
      str += `<div class="goodsCon"><a target = "_blank" >
      <img src="${img}" class="icon"><h4 class="title">${name}</h4>
      <div class="info">限时抢购5件</div></a><div class="priceCon">
      <span class="price">￥${price}</span>
      <a class="button" target="_blank" onclick="listData.addCart(${id},'${name}','${img}','${price}',1)">
      立即抢购</a></div></div >`;
    });
    // console.log(str,$('.proList'));
    // 3 将拼接的数据追加到页面中
    $('.proList').html(str);
  }
  /********商品加入购物车*****/
  addCart(id, name, img, price, num) {
    // console.log(1111);
    console.log(id,name,img,price,num);
    // 1 判断有没有carts,即购物车是否有数据
    let cartGoods = localStorage.getItem('carts');
    // 2-1 有数据,则判断该商品是否存在
    if (cartGoods) {
      // 将购物车数据转化为对象
      cartGoods = JSON.parse(cartGoods);
      // console.log(cartGoods);
      // 2-1-1  设置商品是否存在的状态
      let state = true;
      cartGoods.forEach(ele => {
        // 2-2  当前添加的商品存在就增加数量
        if (ele.gid == id) {
          // 商品数量增加了,就更改状态
          ele.gnum = ele.gnum - 0 + num;
          state = false;
        }
      });
      // console.log(cartGoods);
      // 2-3不存在就新增一条数据
      if (state) {
        let goodsObj = {
          gid: id,
          gname: name,
          gimg: img,
          gprice: price,
          gnum: 1
        };
        cartGoods.push(goodsObj);
      }
      // 2-4将数据转化为json,存储
      localStorage.setItem('carts', JSON.stringify(cartGoods));
    } else {
      // 3-1没有数据,新增购物车数据
      // 3-1-1一条商品信息,就是一个对象
      let goodsObj = {
        gid: id,
        gname: name,
        gimg: img,
        gprice: price,
        gnum: num
      };
      // 3-1-2 声明数组carts,保存单个商品数据对象
      let cartsArr = [];
      cartsArr.push(goodsObj);
      // console.log(cartsArr);
      // 3-2 保存到localstorage中
      localStorage.setItem('carts', JSON.stringify(cartsArr));
    }
  }
  // 懒人加载
  // 绑定滚动事件
  // lr() {
  //   // console.log(6666);
  //   // 获取内容的高度
  //   var ct = all('.goodsCon')[all('.goodsCon').length - 1].offsetTop; // 内容的高度
  //   var st = this.getScTop(); //可视区的高度
  //   var clintTop = this.getClient().h; //滚动条的高度
  //   // 内容的高度<可视区的高度+滚动条的高度,就需要重新加载数据
  //   if (ct < (st + clintTop)) {
  //     // console.log(ct);
  //     this.get('./data/goods.php', res => {
  //       this.getGoods(JSON.parse(res));
  //     });
  //   }
  // }
  // // 可视区高度,宽度
  // getClient() {
  //   return {
  //     h: window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
  //     w: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
  //   }
  // }
  // // 滚动条高度
  // getScTop() {
  //   return window.pageYOffset || document.body.scrollTop;
  // }
  // // get请求方式
  // get(url, cb) {
  //   let xhr = new XMLHttpRequest();
  //   // 2打开请求资源
  //   // xhr.open('get', './01-get.php');  // 第一个参数是请求的方式,第二个是请求地址
  //   xhr.open('get', url);
  //   // 3 发送请求
  //   xhr.send();
  //   xhr.onreadystatechange = function () {
  //     if (xhr.readyState == 4 && xhr.status == 200) {
  //       // 存在并且调用
  //       cb && cb(xhr.response);
  //     }
  //   };
  // }
}
let listData = new List();